<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 标签 </title>
    <link href="css/label.css" rel="stylesheet">
</head>
<body>
     <div class="ws-label">
         <div class="ws-label__note">对选择的<strong>2</strong>个条目应用标签</div>
         <div class="ws-label__list">
             <div class="ws-label__item">
                 <span class="ext-none"></span>
                 <label>3提装5折优惠价，相当于1提14.9元</label>
             </div>
             <div class="ws-label__item">
                 <span class="ext-part"></span>
                 <label>3提装5折优惠</label>
             </div>
             <div class="ws-label__item">
                 <span class="ext-none"></span>
                 <label>3提装5折优惠价，相当于1提14.9元</label>
             </div>
         </div>
         <div class="ws-label__add">
             <span><i></i>增加新标签</span>
         </div>
     </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            Array.prototype.indexOf = function(val) {
                for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) return i;
                    }
                return -1;
            };
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
            $.extend({
                inarray: function(arr, obj) {
                    var i = arr.length;
                    while (i--) {
                        if (arr[i] === obj) {
                            return true;
                        }
                    }
                    return false;
                }
            })

            // mock data
            var labelMap = [
                {
                    name: 'test1',
                    id: 1
                },
                {
                    name: 'test2',
                    id: 2
                },
                {
                    name: 'test3',
                    id: 3
                },{
                    name: 'test4',
                    id: 4
                }
            ]

            var itemArr = [[1,3], [2,3], [1,2,3]];

            var getItemNum = function(id, arr) {
                var num = 0;
                $.each(arr, function(index, item) {
                    $.each(item, function(indexDir, itemDir) {
                        if(itemDir == id) {
                            num++;
                        }
                    })
                })
                return num;
            }

            var delItem = function(id, arr) {
                var newArr = [];
                $.each(arr, function(index, item) {
                    item.remove(id);
                })
                return arr;
            }

            var addItem = function(id, arr) {
                $.each(arr, function(index, item) {
                    if(!$.inarray(item, id)) {
                        arr[index].push(id);
                    }
                })
                return arr;
            }

            // 渲染数据
            var labelTpl = '';
            $.each(labelMap, function(index, item) {
                var num = getItemNum(item.id, itemArr);
                var extClass = '';
                if(num == 0) {
                    extClass = 'ext-none';
                } else if(num == itemArr.length) {
                    extClass = 'ext-all';
                } else {
                    extClass = 'ext-part';
                }

                labelTpl += '<div class="ws-label__item">\
                                <span class="'+extClass+'" data-id="'+item.id+'"></span>\
                                <label>'+item.name+'</label>\
                            </div>';
            });
            $('.ws-label__list').html(labelTpl);

            $(document).on('click', '.ws-label__item .close', function() {
                $(this).closest('.ws-label__item').remove();
            })

            $(document).on('click', '.ws-label__add span', function() {
                $('.ws-label__list').append('<div class="ws-label__item">\
                                                <span class="ext-all"></span>\
                                                <input type="text">\
                                                <div class="close"></div>\
                                            </div>');
            })

            $(document).on('click', '.ws-label__item>span', function() {
                var $this = $(this);
                if($this.hasClass('ext-part')) {
                    itemArr = addItem(Number($this.attr('data-id')), itemArr);
                    $this.removeClass().addClass('ext-all');
                } else if($this.hasClass('ext-all')) {
                    itemArr = delItem(Number($this.attr('data-id')), itemArr)
                    $this.removeClass().addClass('ext-none');
                } else if($this.hasClass('ext-none')) {
                    itemArr = addItem(Number($this.attr('data-id')), itemArr);
                    $this.removeClass().addClass('ext-all');
                }
                console.log(JSON.stringify(itemArr));
            })
            console.log(JSON.stringify(itemArr));
        })
    </script>
</body>

</html>
